<!DOCTYPE html>
<html lang="en" class="no-js">
  <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="generator" content="Hugo 0.55.6" />

  <meta name="ROBOTS" content="INDEX, FOLLOW" />

  <link rel="alternate" type="application/rss&#43;xml" href="/v0.6/v0.6/index.xml" />

  <link rel="shortcut icon" href="/v0.6/assets/favicons/favicon.ico" />
  <link rel="apple-touch-icon" href="/v0.6/assets/favicons/apple-touch-icon.png" sizes="180x180" />
  <link rel="icon" type="image/png" href="/v0.6/assets/favicons/favicon-16x16.png" sizes="16x16" />
  <link rel="icon" type="image/png" href="/v0.6/assets/favicons/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="/v0.6/assets/favicons/android-144x144.png" sizes="36x36" />
  <link rel="icon" type="image/png" href="/v0.6/assets/favicons/android-144x144.png" sizes="48x48" />
  <link rel="icon" type="image/png" href="/v0.6/assets/favicons/android-144x144.png" sizes="72x72" />
  <link rel="icon" type="image/png" href="/v0.6/assets/favicons/android-144x144.png" sizes="96x196" />
  <link rel="icon" type="image/png" href="/v0.6/assets/favicons/android-144x144.png" sizes="144x144" />
  <link rel="icon" type="image/png" href="/v0.6/assets/favicons/android-192x192.png" sizes="192x192" />

  <title>Contributing to Meshery Docs | Meshery</title>
  <meta property="og:title" content="Contributing to Meshery Docs" />
  <meta property="og:description"
    content="How to contribute to Meshery Docs." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://docs.meshery.io" />
  <meta property="og:site_name" content="https://docs.meshery.io" />
  <meta property="og:image"
    content="https://raw.githubusercontent.com/meshery/meshery/master/docs/assets/img/meshery-cncf-twitter.png" />

  <meta itemprop="name" content="Contributing to Meshery Docs" />
  <meta itemprop="description"
    content="How to contribute to Meshery Docs." />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Contributing to Meshery Docs" />
  <meta name="twitter:description"
    content="How to contribute to Meshery Docs." />
  <meta name="twitter:image"
    content="https://raw.githubusercontent.com/meshery/meshery/master/docs/assets/img/meshery-cncf-twitter.png" />
  <!-- <link rel="stylesheet" href="/v0.6/assets/css/palette.css" /> -->
  <!-- <link rel="stylesheet" href="/v0.6/assets/css/anchorjs.css" /> -->
  <link rel="stylesheet" href="/v0.6/assets/css/sass.css" />
  <link rel="stylesheet" href="/v0.6/v0.6https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"
    integrity="sha512-qzgd5cYSZcosqpzpn7zF2ZId8f/8CHmFKZ8j7mU4OUXTNRd5g+ZHBPsgKEwoqxCtdQvExE5LprwwPAgoicguNg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- Anchorjs included for adding hover anchor links to headings -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.2/anchor.min.js"></script>
  <script>
    $(function () {
      /** AnchorJS options and selector */
      anchors.options = {
        visible: "hover",
        placement: "right",
      };
      anchors.add("h1, h2, h3, h4, h5");
    });
    // Function to handle anchor links
    document.addEventListener('click', function (event) {
      if (event.target.tagName === 'A' && event.target.getAttribute('href').startsWith('#')) {
        window.location.hash = event.target.getAttribute('href');
      }
    });
  </script>
</head>
<style></style> <header>
  <nav class="js-navbar-scroll navbar">
    <a class="navbar-brand" href="/v0.6/v0.6/">
      <div class="navbar-logo">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.08 80.17"><defs><style>.cls-1{fill:#00d3a9;}.cls-2{fill:#00b39f;}.cls-3 {fill:var(--meshery-logo-text-fill);}</style></defs><polygon class="cls-1" points="41.26 18.9 41.26 38.04 57.86 28.43 41.26 18.9"/><polygon class="cls-1" points="41.26 42.05 41.26 61.29 58.01 51.71 41.26 42.05"/><polygon class="cls-2" points="38.87 37.91 38.87 19.06 22.48 28.45 38.87 37.91"/><path class="cls-2" d="M6,61.22A40.35,40.35,0,0,0,18.71,74V53.86Z"/><polygon class="cls-2" points="38.87 61.2 38.87 42.19 22.44 51.7 38.87 61.2"/><polygon class="cls-1" points="21.1 72.81 37.74 63.3 21.1 53.68 21.1 72.81"/><polygon class="cls-2" points="59.15 72.92 59.15 53.81 42.53 63.31 59.15 72.92"/><path class="cls-2" d="M75.42,59a39.88,39.88,0,0,0,4.71-17.18l-17.32,9.9Z"/><polygon class="cls-1" points="61.54 49.7 78.23 40.15 61.54 30.55 61.54 49.7"/><polygon class="cls-2" points="59.15 26.42 59.15 7.43 42.61 16.91 59.15 26.42"/><polygon class="cls-2" points="59.15 49.61 59.15 30.45 42.57 40.05 59.15 49.61"/><polygon class="cls-2" points="40.07 80.17 40.07 80.17 40.07 80.17 40.07 80.17"/><polygon class="cls-1" points="21.1 30.41 21.1 49.72 37.8 40.05 21.1 30.41"/><path class="cls-2" d="M38.87,0A40,40,0,0,0,21.28,4.65L38.87,14.77Z"/><polygon class="cls-1" points="21.1 7.31 21.1 26.49 37.81 16.91 21.1 7.31"/><path class="cls-2" d="M18.71,6.14A40.28,40.28,0,0,0,6,18.94l12.72,7.34Z"/><path class="cls-1" d="M59,4.74A40,40,0,0,0,41.26,0V14.93Z"/><path class="cls-1" d="M0,41.48A40,40,0,0,0,4.79,59.16L17.67,51.7Z"/><path class="cls-1" d="M4.79,21A40,40,0,0,0,0,38.58L17.69,28.45Z"/><path class="cls-2" d="M21.24,75.49a39.88,39.88,0,0,0,17.63,4.66V65.41Z"/><path class="cls-1" d="M74.17,19A40.24,40.24,0,0,0,61.54,6.21v20.1Z"/><path class="cls-1" d="M61.54,74A40.34,40.34,0,0,0,74.23,61.07L61.54,53.75Z"/><path class="cls-2" d="M80.13,38.48a39.88,39.88,0,0,0-4.76-17.42L62.64,28.43Z"/><path class="cls-1" d="M41.26,80.15a39.79,39.79,0,0,0,17.59-4.64L41.26,65.34Z"/><polygon class="cls-2" points="18.71 49.54 18.71 30.61 2.27 40.04 18.71 49.54"/><polygon class="cls-3" points="269.94 29.39 269.94 30.89 269.94 37.93 269.94 46.53 269.94 59.08 303.36 59.08 303.36 52.03 276.99 52.03 276.99 46.53 276.99 44.98 297.25 44.98 297.25 37.93 276.99 37.93 276.99 30.89 303.36 30.89 303.36 23.84 269.94 23.84 269.94 29.39"/><polygon class="cls-3" points="141.41 29.39 141.41 30.89 141.41 37.93 141.41 46.53 141.41 59.08 174.83 59.08 174.83 52.03 148.46 52.03 148.46 46.53 148.46 44.98 168.72 44.98 168.72 37.93 148.46 37.93 148.46 30.89 174.83 30.89 174.83 23.84 141.41 23.84 141.41 29.39"/><path class="cls-3" d="M221.08,49.87a8.74,8.74,0,0,1-.73,3.57,9,9,0,0,1-2,2.94,9.5,9.5,0,0,1-2.93,2,9,9,0,0,1-3.6.73h-33V51.66h33a1.78,1.78,0,0,0,1.79-1.79V47a1.76,1.76,0,0,0-.52-1.27,1.73,1.73,0,0,0-1.27-.51H188.09a8.74,8.74,0,0,1-3.57-.73,9.4,9.4,0,0,1-5-5,8.9,8.9,0,0,1-.73-3.57V33.09a9.11,9.11,0,0,1,.73-3.59,9.58,9.58,0,0,1,2-2.94,9.32,9.32,0,0,1,3-2,8.9,8.9,0,0,1,3.57-.72h33v7.47h-33a1.78,1.78,0,0,0-1.79,1.78V36a1.78,1.78,0,0,0,1.79,1.79h23.73a9.11,9.11,0,0,1,3.6.72,9.59,9.59,0,0,1,2.93,2,9.41,9.41,0,0,1,2,2.94,8.9,8.9,0,0,1,.73,3.59Z"/><path class="cls-3" d="M265.54,59.08h-6.73V45.22H232.6V59.08h-6.72V37.75h32.93V23.84h6.73ZM232.6,34.44h-6.72V23.84h6.72Z"/><polygon class="cls-3" points="361.45 36.17 352.64 23.84 343.83 23.84 357.93 44.98 357.93 59.08 364.98 59.08 364.98 44.98 379.08 23.84 370.38 23.84 361.45 36.17"/><path class="cls-3" d="M315.35,30.56h18.07v7.33H318.86v6.72h3.34L335,59.08h8.7L330.9,44.61h5a5.48,5.48,0,0,0,5.48-5.48V29.31a5.47,5.47,0,0,0-5.48-5.47H308.44V59.08h7.05Z"/><path class="cls-3" d="M136,59.08h-7.47V33.38a1.94,1.94,0,0,0-.16-.8,2.15,2.15,0,0,0-1.11-1.11,1.94,1.94,0,0,0-.8-.16H91.91V23.84h34.54a9.22,9.22,0,0,1,3.69.75,9.38,9.38,0,0,1,5.1,5.1,9.22,9.22,0,0,1,.75,3.69Zm-36.6,0H91.91V31.31l7.48-2Zm18.28,0h-7.48V35.22h7.48Z"/></svg>
        <span
          class="font-weight-bold small-hide"
          style="
            font-size: 2rem;
            vertical-align: bottom;
            color: var(--meshery-logo-text-fill);
            font-family: 'Open Sans';
          "
          >Documentation</span
        >
      </div>
    </a>

    <div id="main_navbar">
      <ul class="navbar-nav">
        <!-- 
			<li class="nav-item">
        <a class="nav-link" href="/v0.6/v0.6https://github.com/meshery/meshery" target="_blank"><span>GitHub</span></a>
      </li>  -->

        <!-- Internal links -->
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="/v0.6/v0.6/installation/quick-start"
            ><span>Quick Start</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="/v0.6/v0.6https://meshery.io"
            ><span>Site</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="/v0.6/v0.6http://discuss.meshery.io/"
            ><span>Discuss</span></a
          >
        </li>
        
        
        <a href="/v0.6/v0.6https://play.meshery.io">
          <div class="nav-btn">Playground</div>
        </a>
        <!--Version Selector -->
        <select
          onchange="window.location=this.value"
          class="appearance-none flex-1 w-full px-0 py-1 placeholder-gray-900 tracking-wide focus:outline-none version-selector"
          name="versioningSelection"
          id="versioningSelection"
        >
       </select>

          <!-- <option value="">Versions</option> -->
          <option  
           value="/"
           class="nav-item mr-4 mb-2 mb-lg-0 text-black">
           <span>latest</span>
         </option>
         <option  
          value="/v0.6"
          class="nav-item mr-4 mb-2 mb-lg-0 text-black">
         <span>v0.6</span>
       </option>
         <!-- we get the version selected, and put it to the right option  -->
         <option  
           value="/v0.5"
           class="nav-item mr-4 mb-2 mb-lg-0 text-black">
           <span>v0.5</span>
         </option>
         <!-- we get the version selected, and put it to the right option  --><option
           
           value="/v0.4"
           class="nav-item mr-4 mb-2 mb-lg-0 text-black"
         >
           <span>v0.4</span>
         </option>
         
       </select>
      </ul>
    </div>

    <div class="icon-container">
      <button class="nav-toggle-btn nav-toggle-btn--main">
        <svg
          id="menu-nav-toggle-btn"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-menu"
        >
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
      <button class="nav-mode-icon" id="mode-toggle-btn" style="text-align: center">
        <img class="nav-text" id="logo-dark-light" src="/assets/img/nav-icons/mode-toggle-icon-moon.png" 
        data-logo-for-dark="/assets/img/nav-icons/mode-toggle-icon-moon.png"
        data-logo-for-light="/assets/img/nav-icons/mode-toggle-icon-sun.png"
        />
      </button>
    </div>

    <!--Search Bar
    <div class="navbar-nav d-none d-lg-block"><input type="search" class="form-control td-search-input" placeholder="&#xf002 Search this site…" aria-label="Search this site…" autocomplete="off"></div>-->

    <!-- meshery-custom-begin
	<div class="navbar-nav d-none d-lg-block">
          <a class="gh-source" data-gh-source="github" href="/v0.6/v0.6https://github.com/meshery/meshery" title="Go to repository" data-md-state="done">
          <div class="gh-source__repository">
            <i class="fab fa fa-github fa-2x" style='padding-right:20px; float:left; margin-top:5px'></i>
            meshery/meshery
          <ul class="gh-source__facts"><li class="gh-source__fact" id='stars'></li><li id="forks" class="gh-source__fact"></li></ul></div></a>
        </div>
      </div>
meshery-custom-end -->
  </nav>
</header>

<!-- meshery-custom-begin
<script>
$(document).ready(function() {
  var url = "https://api.github.com/search/repositories?q=meshery/meshery";
  fetch(url, { 
      headers: {"Accept":"application/vnd.github.preview"}
  }).then(function(e) {
    return e.json()
  }).then(function(r) {
     console.log(r.items[0])
     stars = r.items[0]['stargazers_count']
     forks = r.items[0]['forks_count']
     $('#stars').text(stars + " Stars")
     $('#forks').text(forks + " Forks")
  });
});
</script>
meshery-custom-end -->


  <body class="td-section dark-mode">
    <script>
      if(localStorage.getItem("mode") == "light-mode")  {
      document.body.classList.remove("dark-mode");
      const allLogos = document.querySelectorAll("#logo-dark-light");
      allLogos.forEach(e => e.src = e.dataset.logoForLight);
  }
    </script>
    <div class="flex-container">
      <div class="left-container">
        <div class="sidebar-container-wrapper">
          <div class="sidebar-container"><div class="sidebar-menu">
  <form class="sidebar__search-form">
    <input
      type="search"
      class="sidebar__search-input"
      id="sidebar-search-input"
      placeholder="Search this site..."
      aria-label="Search this site..."
      autocomplete="off"
    />
  </form>

  <script type="text/javascript">
    <!--Ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView-->
    <!--Ref: https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move-->
    (() => {
      window.addEventListener("load", function () {
        let scrollElem = document.getElementsByClassName("sidebar-nav__section-link active").item(0);
        scrollElem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
      });
    })();
  </script>

  <nav class="sidebar-nav" id="td-section-nav">
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/v0.6/v0.6/installation/quick-start"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >🚀 Quick Start
        </a>
      </li>
      
      <ul>
        <li id="quick-start">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/installation"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Supported Platforms ↆ</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/installation/compatibility-matrix"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Compatibility Matrix</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/v0.6/v0.6/project/overview"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >🗺 Overview
        </a>
      </li>
      
      <ul>
        <li id="overview">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/project/faq"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >FAQ</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/v0.6/v0.6/project"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >🧑‍💻 Contributing & Community
        </a>
      </li>
      
      <ul>
        <li id="contributing-community">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/project/community"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Community</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/project/contributing"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Contributing ↆ</a
              >
            </li>
             
             <ul>
                <li id="">
                     
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-build-release-ci"
                    href="/v0.6/v0.6/project/contributing/build-and-release"
                    >Build & Release (CI)</a>
                </li>
                  
                  <ul>
                         
                      <li id="end-to-end-testing">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-contributing-community-contributing-ↆ-end-to-end-testing"
                        href="/v0.6/v0.6/project/contributing/contributing-cypress"
                        >End-to-End Testing</a
                      >
                    </li>
                      
                  </ul>
                   

                   
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-meshery-adapters"
                    href="/v0.6/v0.6/project/contributing/contributing-adapters"
                    >Meshery Adapters</a>
                </li>
                   

                   
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-meshery-cli"
                    href="/v0.6/v0.6/project/contributing/contributing-cli"
                    >Meshery CLI</a>
                </li>
                  
                  <ul>
                         
                      <li id="cli-design-principles">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-contributing-community-contributing-ↆ-cli-design-principles"
                        href="/v0.6/v0.6/project/contributing/contributing-cli-guide"
                        >CLI Design Principles</a
                      >
                    </li>
                      
                  </ul>
                   

                   
                  <a
                    class="sidebar-nav__section-link  active "
                    id="m-contributing-community-contributing-ↆ-meshery-docs"
                    href="/v0.6/v0.6/project/contributing/contributing-docs"
                    >Meshery Docs</a>
                </li>
                   

                   
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-meshery-errors"
                    href="/v0.6/v0.6/project/contributing/contributing-error"
                    >Meshery Errors</a>
                </li>
                   

                   
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-meshery-server"
                    href="/v0.6/v0.6/project/contributing/contributing-server"
                    >Meshery Server</a>
                </li>
                   

                   
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-meshery-ui"
                    href="/v0.6/v0.6/project/contributing/contributing-ui"
                    >Meshery UI</a>
                </li>
                   

                   
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-meshery-docker-extension"
                    href="/v0.6/v0.6/project/contributing/contributing-docker-extension"
                    >Meshery Docker Extension</a>
                </li>
                   

                   
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-meshery-server-events"
                    href="/v0.6/v0.6/project/contributing-server-events"
                    >Meshery Server Events</a>
                </li>
                   

                
                </ul>
               
              </ul>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/project/releases"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Releases</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/project/security-vulnerabilities"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Vulnerabilities</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/v0.6/v0.6/concepts"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >🧠 Concepts
        </a>
      </li>
      
      <ul>
        <li id="concepts">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/concepts/architecture"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Architectural ↆ</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/concepts/logical"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Logical ↆ</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/v0.6/v0.6/tasks"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >⚙️ Tasks (all)
        </a>
      </li>
      
      <ul>
        <li id="tasks-all">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/tasks/application-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Application Management</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/tasks/filter-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Filter Management</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/tasks/lifecycle-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Lifecycle Management</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/tasks/pattern-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Pattern Management</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/tasks/performance-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Performance Management</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/v0.6/v0.6/guides"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >📚 Guides (all)
        </a>
      </li>
      
      <ul>
        <li id="guides-all">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/guides/meshery-metrics"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Integrating Prometheus and Grafana</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/guides/importing-apps"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Importing Applications</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/guides/pipelining-service-mesh-specifications"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Pipelining service mesh specifications</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/guides/performance-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Performance Management with Meshery</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/guides/troubleshooting"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Troubleshooting Guide</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/guides/upgrade"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Upgrading Meshery</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/guides/mesheryctl"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Using mesheryctl ↆ</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/guides/multiple-adapters"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Using Multiple Meshery Adapters</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/v0.6/v0.6/extensibility"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >🛠 Extensibility
        </a>
      </li>
      
      <ul>
        <li id="extensibility">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/extensibility/adapters"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Adapters</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/extensibility/load-generators"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Load Generators</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/extensibility/providers"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Providers</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/extensibility/api"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >REST & GraphQL APIs</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/extensibility/ui"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >UI Plugins</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/v0.6/v0.6/reference"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >📖 Reference
        </a>
      </li>
      
      <ul>
        <li id="reference">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/reference/mesheryctl"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Meshery CLI</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/reference/error-codes"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Error Codes</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/v0.6/v0.6/extensibility/api"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >REST & GraphQL APIs ↆ</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
  </nav>
</div>
</div>
        </div>

        <div class="icon-container">
          <button class="nav-toggle-btn nav-toggle-btn--document">
            <?xml version="1.0" encoding="utf-8"?>
              <svg version="1.1" id="document-nav-toggle-btn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 10.7 18.7" style="enable-background:new 0 0 10.7 18.7;" xml:space="preserve">
              <style type="text/css">
                .st0{stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;}
              </style>
              <path class="st0" d="M8.1,9.4L1,1.9C0.7,1.7,0.7,1.2,1,1c0.3-0.3,0.7-0.3,1,0c0,0,0,0,0,0l7.8,7.9c0.3,0.3,0.3,0.7,0,1l-7.8,7.9
                c-0.3,0.3-0.7,0.3-1,0c0,0,0,0,0,0c-0.3-0.3-0.3-0.7,0-1L8.1,9.4z"/>
              </svg>
          </button>
        </div>
      </div>
      <main class="main-container" role="main">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb spb-1">
            <li class="breadcrumb-item active" aria-current="page"><div id="breadcrumbs">


   <a href="/v0.6/v0.6/">home</a>


  
    / <a href="/v0.6/v0.6/project">project</a> 
  

  
    / <a href="/v0.6/v0.6/project/contributing">contributing</a> 
  

  
    / contributing to meshery docs
  

</div>

<!-- <a href="/v0.6/v0.6http://idratherbewriting.com" class="noCrossRef productSubtitle"> Home </a> > <a class="noCrossRef productSubtitle" href="/v0.6/v0.6http://localhost:4000">Learn API Doc</a> > contributing-docs -->
</li>
          </ol>
        </nav>
        <div class="td-content">
          
          <h1>Contributing to Meshery Docs</h1>
           <p>Before contributing, please review the <a href="/v0.6/v0.6https://github.com/meshery/meshery/blob/master/CONTRIBUTING.md#documentation-contribution-flow">Documentation Contribution Flow</a>. In the following steps you will set up your development environment, fork and clone the repository, run the site locally, and finally commit, sign-off, and push any changes made for review.</p>

<div class="alert alert-info">
<h4 class="alert-heading">Meshery Documentation Design Specification</h4>
See the <a href="/v0.6/v0.6https://docs.google.com/document/d/17guuaxb0xsfutBCzyj2CT6OZiFnMu9w4PzoILXhRXSo/edit#">Meshery Documentation Design Specification</a> which serves to provide an overview of the tooling and approach used to create Meshery’s documentation and it information architecture.
</div>

<h2 id="documentation-framework">Documentation Framework</h2>

<p>Meshery documentation is made of these components:</p>

<ul>
  <li>Framework - <a href="/v0.6/v0.6https://jekyllrb.com">Jekyll</a></li>
  <li>Theme - <a href="/v0.6/v0.6https://github.com/vsoch/docsy-jekyll">https://github.com/vsoch/docsy-jekyll</a></li>
  <li>Repo - <a href="/v0.6/v0.6https://github.com/meshery/meshery/tree/master/docs">https://github.com/meshery/meshery/tree/master/docs</a></li>
  <li>Site - <a href="/v0.6/v0.6https://docs.meshery.io">https://docs.meshery.io</a></li>
  <li>AWS API GW - an instance is configured to redirect from docs.meshery.io to meshery.layer5.io, because of the repo location of where the docs currently reside.</li>
</ul>

<h2 id="set-up-your-development-environment">Set up your development environment</h2>

<div class="alert alert-info">
<h4 class="alert-heading">Jekyll</h4>
The Meshery Docs site is built using Jekyll - a simple static site generator. Jekyll can be installed on different platforms like Windows, Linux, and MacOS by the following steps 
</div>

<h3 id="for-windows">For Windows</h3>

<p><strong>Note:</strong> Windows users can run Jekyll by following the <a href="/v0.6/v0.6https://jekyllrb.com/docs/installation/windows/">Windows Installation Guide</a> and also installing Ruby Version Manager <a href="/v0.6/v0.6https://rvm.io">RVM</a>. RVM is a command-line tool which allows you to work with multiple Ruby environments on your local machine. Alternatively, if you’re running Windows 10 version 1903 Build 18362 or higher, you can upgrade to Windows Subsystem for Linux <a href="/v0.6/v0.6https://docs.microsoft.com/en-us/windows/wsl/install-win10">WSL</a> and run Jekyll in Linux instead.</p>

<ul>
  <li>Fire up your WSL VM and install the ruby version manager (RVM):</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">sudo apt update
sudo apt install curl g++ gnupg gcc autoconf automake bison build-essential libc6-dev \
 	libffi-dev libgdbm-dev libncurses5-dev libsqlite3-dev libtool \
 	libyaml-dev make pkg-config sqlite3 zlib1g-dev libgmp-dev \
 	libreadline-dev libssl-dev
sudo gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3
curl -sSL https://get.rvm.io | sudo bash -s stable
sudo usermod -a -G rvm `whoami`</code>
</div>
</pre>

<p>If <code class="language-plaintext highlighter-rouge">gpg --keyserver</code> gives an error, you can use:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">sudo gpg --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3</code>
</div>
</pre>

<p>or</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">sudo gpg2 --keyserver hkp://pool.sks-keyservers.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB</code>
</div>
</pre>

<p>Restart your WSL VM before moving forward.</p>

<ul>
  <li>
    <p>For installing Ruby, run:</p>

    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  rvm <span class="nb">install </span>ruby
  rvm <span class="nt">--default</span> use ruby 2.7.5
  gem update
  gem <span class="nb">install </span>jekyll bundler
</code></pre></div>    </div>
  </li>
  <li>Update the Gemfile located in meshery/docs directory
    <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  ruby '3.0.2'
</code></pre></div>    </div>
    <p><strong>Note:</strong> In place of <code class="language-plaintext highlighter-rouge">3.0.2</code> add your installed version</p>
  </li>
  <li>Also add this to the next line in the Gemfile
    <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  gem 'wdm','&gt;=0.1.0' if Gem.win_platform?
</code></pre></div>    </div>
    <p><strong>Note:</strong> This is just a workaround for your local machine so do not commit or push the modified Gemfile or Gemfile.lock during Pull Requests</p>
  </li>
  <li>
    <p>Next, go to this folder on your device
<code class="language-plaintext highlighter-rouge">C:\Ruby24-x64\lib\ruby\gems\2.4.0\gems\eventmachine-1.2.5-x64-mingw32\lib</code></p>
  </li>
  <li>Add <code class="language-plaintext highlighter-rouge">require 'em/pure_ruby'</code> in the first line of the <strong>eventmachine.rb</strong> file</li>
</ul>

<h3 id="for-linux">For Linux</h3>

<ul>
  <li>Prerequisites</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">sudo apt-get update
sudo apt-get install autoconf bison build-essential libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm3 libgdbm-dev</code>
</div>
</pre>
<h4 id="installing-rbenv">Installing rbenv</h4>

<ul>
  <li>Cloning the rbenv repository</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">git clone https://github.com/rbenv/rbenv.git ~/.rbenv</code>
</div>
</pre>
<p><strong>Note:</strong> Change bashrc with your shell specific rc file, for eg: if you are using zsh then the filename is zshrc.</p>
<ul>
  <li>Setting the path</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">echo &#39;export PATH=&quot;$HOME/.rbenv/bin:$PATH&quot;&#39; &gt;&gt; ~/.bashrc</code>
</div>
</pre>
<ul>
  <li>rbenv init</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">echo &#39;eval &quot;$(rbenv init -)&quot;&#39; &gt;&gt; ~/.bashrc</code>
</div>
</pre>
<ul>
  <li>Reload your bashrc</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">source ~/.bashrc</code>
</div>
</pre>
<ul>
  <li>Check installation</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">type rbenv</code>
</div>
</pre>

<h4 id="install-ruby">Install Ruby</h4>

<ul>
  <li>rbenv install version</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">rbenv install 2.7.5</code>
</div>
</pre>

<ul>
  <li>To list all the versions that can be installed</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">rbenv install --list</code>
</div>
</pre>

<ul>
  <li>Set which Ruby version you want to use</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">rbenv global version</code>
</div>
</pre>

<ul>
  <li>Check Ruby installation</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">ruby -v</code>
</div>
</pre>

<h3 id="for-macos">For MacOS</h3>

<ul>
  <li>Use docs here <a href="/v0.6/v0.6https://jekyllrb.com/docs/installation/macos/">Jekyll installation</a></li>
</ul>

<p><strong>Note:</strong> In case of any installation issues, use the <a href="/v0.6/v0.6http://discuss.meshery.io">discussion forum</a>.</p>

<h3 id="get-the-code">Get the code</h3>

<ul>
  <li>Fork and then clone the <a href="/v0.6/v0.6https://github.com/meshery/meshery">Meshery repository</a></li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">git clone https://github.com/YOUR-USERNAME/meshery</code>
</div>
</pre>
<ul>
  <li>Change to the docs directory</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">cd docs</code>
</div>
</pre>
<ul>
  <li>Install any Ruby dependencies</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">gem install bundler
bundle install</code>
</div>
</pre>

<p><strong>Note:</strong> If you are a Mac user you do not need to install the Ruby dependencies, after moving on to the docs directory, you can serve the site.</p>

<h3 id="serve-the-site">Serve the site</h3>

<ul>
  <li>Serve the code locally</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">make docs</code>
</div>
</pre>
<ul>
  <li>If that gives an error run:</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">bundle exec jekyll serve --drafts --config _config_dev.yml</code>
</div>
</pre>

<p><em>From the Makefile, this command is actually running <code class="language-plaintext highlighter-rouge">$ bundle exec jekyll serve --drafts --livereload --config _config_dev.yml</code>. If this command causes errors try running the server without Livereload with this command: <code class="language-plaintext highlighter-rouge">$ bundle exec jekyll serve --drafts --config _config_dev.yml</code>. Just keep in mind you will have to manually restart the server to reflect any changes made without Livereload. There are two Jekyll configuration, <code class="language-plaintext highlighter-rouge">jekyll serve</code> for developing locally and <code class="language-plaintext highlighter-rouge">jekyll build</code> when you need to generate the site artefacts for production.</em></p>

<h3 id="using-docker">Using Docker</h3>

<p>If you’ve Docker and <code class="language-plaintext highlighter-rouge">make</code> installed in your system, then you can serve the site locally</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">make docker</code>
</div>
</pre>

<p>This doesn’t require the need for installing Jekyll and Ruby in your system</p>

<p><strong>But, you need to make sure that GNU make is working in your system (might not work in Windows)</strong></p>

<h4 id="note">Note</h4>

<p>While performing the above step, if you’re facing errors with a message like below…</p>

<p><code class="language-plaintext highlighter-rouge">Your ruby version is x.x.x but your Gemfile specified 2.7.x</code></p>

<p>This is because Jekyll always considers the exact version of Ruby unlike JavaScript.</p>

<p>So, you need to follow either of the three steps to resolve this problem;</p>

<ul>
  <li>Install the required Ruby version by using <code class="language-plaintext highlighter-rouge">rvm</code> or by any means given above</li>
  <li>Alternatively, if you have Docker installed, then type <code class="language-plaintext highlighter-rouge">make docker-docs</code> to view the changes</li>
  <li>If you’re unable to install the required Ruby version, then manually configure the <code class="language-plaintext highlighter-rouge">Gemfile</code> as below (not recommended! Do only if above two steps fail):</li>
</ul>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>source "https://rubygems.org"
ruby '2.7.5' //to any version you have installed
</code></pre></div></div>

<p>Automatically the <code class="language-plaintext highlighter-rouge">Gemfile.lock</code> will update once the <code class="language-plaintext highlighter-rouge">make docs</code> is given (for Windows, run <code class="language-plaintext highlighter-rouge">bundle exec jekyll serve</code> if WSL2 isn’t present)</p>

<p><strong>WARNING: If you have followed the third step then please don’t commit the changes made on <code class="language-plaintext highlighter-rouge">Gemfile</code> and <code class="language-plaintext highlighter-rouge">Gemfile.lock</code> in your branch to preserve integrity, else the CI action will fail to generate the site preview during PR</strong>.</p>

<h3 id="make-necessary-changes">Make Necessary Changes</h3>
<ul>
  <li>Make changes as required by the issue you are solving</li>
  <li>Be sure check that your changes appear correctly locally by serving the site using <code class="language-plaintext highlighter-rouge">make docs</code></li>
</ul>

<h4 id="note-1">Note</h4>
<ul>
  <li>If the issue requires making new doc page that replaces the old page, please don’t forget to add a redirect link on the old page. This redirect link field should have the link of the new page created.</li>
</ul>

<h3 id="create-a-pull-request">Create a Pull Request</h3>

<ul>
  <li>After making changes, don’t forget to commit with the sign-off flag (-s)!</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">git commit -s -m “my commit message w/signoff”</code>
</div>
</pre>
<ul>
  <li>Once all changes have been committed, push the changes.</li>
</ul>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">git push origin &lt;branch-name&gt;</code>
</div>
</pre>
<ul>
  <li>Then on Github, navigate to the <a href="/v0.6/v0.6https://github.com/meshery/meshery">Meshery repository</a> and create a pull request from your recently pushed changes!</li>
</ul>

<hr />

<ul>
  <li><em>See the <a href="/v0.6/v0.6https://docs.google.com/document/d/17guuaxb0xsfutBCzyj2CT6OZiFnMu9w4PzoILXhRXSo/edit">Meshery Documentation Google Doc</a> for additional reference.</em></li>
</ul>

<h2 id="using-the-features-of-meshery-docs">Using the features of Meshery Docs</h2>

<h3 id="clipboard-feature">Clipboard Feature</h3>

<p>Most popular clipboard plugins like Clipboard JS require the manual creation of a new ID for each code snippet. A different approach is used here. For code snippets, we either use html tags or markdown in the following manner:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">&lt;pre class=&quot;codeblock-pre&quot;&gt;&lt;div class=&quot;codeblock&quot;&gt;
&lt;code class=&quot;clipboardjs&quot;&gt;code_snippet_here&lt;/code&gt;
&lt;/div&gt;&lt;/pre&gt;</code>
</div>
</pre>

<p>You can also use the <code class="language-plaintext highlighter-rouge">code</code> component created for this feature to make it easy to use. It can be used by including code.html and then passing the code snippet to it.</p>

<p>If the code snippet does not cotain any special characters then, it can be used directly like,<br /><br />
<code class="language-plaintext highlighter-rouge">{% include code.html code="code_snippet_here" %}</code>.</p>

<p>If the code snippet has special characters then we need to capture it first in variable <code class="language-plaintext highlighter-rouge">code_content</code> like this,<br /><br /> <code class="language-plaintext highlighter-rouge">{% capture code_content%}code_snippet_here{% endcapture %}</code><br /><br /> and then pass it to the component like this,<br /><br /> <code class="language-plaintext highlighter-rouge">{% include code.html code=code_content %}</code>.<br /><br /> That’s it.</p>

<p><strong>NOTE:</strong> Don’t use <code class="language-plaintext highlighter-rouge">code</code> component when the snippet is in between an ordered list, it breaks the order and next item in the list will have numbering from 1. So better use <code class="language-plaintext highlighter-rouge">&lt;pre class="codeblock_pre"&gt;...&lt;/pre&gt;</code> method above instead when the snippet is in between an ordered list.</p>

<p><strong>A full block:</strong></p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">```code snippet```</code>
</div>
</pre>

<p><strong>Inline formatting:</strong></p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">\`code snippet\`: `code snippet`</code>
</div>
</pre>

<p><strong>Language specific:</strong></p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">```(language name)
code snippet
```</code>
</div>
</pre>

<p>Whenever the code tags are detected, the clipboard javascript file is automatically loaded. Each code element is given a custom id and a clipboard-copy icon to copy the content.</p>

<h2 id="documentation-contribution-flow-summary">Documentation Contribution Flow Summary</h2>

<p><strong>NOTE: For contributing <code class="language-plaintext highlighter-rouge">mesheryctl</code> reference section, refer <a href="/v0.6/v0.6/contributing-cli">Contributing CLI</a></strong></p>

<p>The following is a concise summary of the steps to contribute to Meshery documentation.</p>

<ol>
  <li>Create a fork, if you have not already, by following the steps described <a href="/v0.6/v0.6CONTRIBUTING-gitflow.md">here</a></li>
  <li>In the local copy of your fork, navigate to the docs folder.
<code class="language-plaintext highlighter-rouge">cd docs</code></li>
  <li>Create and checkout a new branch to make changes within
<code class="language-plaintext highlighter-rouge">git checkout -b &lt;my-changes&gt;</code></li>
  <li>Edit/add documentation.
<code class="language-plaintext highlighter-rouge">vi &lt;specific page&gt;.md</code></li>
  <li>Add redirect link on the old page (only when a new page is created that replaces the old page)</li>
  <li>Run site locally to preview changes.
<code class="language-plaintext highlighter-rouge">make docs</code></li>
  <li>Commit, <a href="/v0.6/v0.6#commit-signing">sign-off</a>, and push changes to your remote branch.
<code class="language-plaintext highlighter-rouge">git push origin &lt;my-changes&gt;</code></li>
  <li>Open a pull request (in your web browser) against the repo: https://github.com/meshery/meshery.</li>
</ol>

<h3 id="navigation-table-of-contents-in-sidebar-toc">Navigation Table of Contents in Sidebar (toc)</h3>

<p>Sidebars use toc to create a table of contents. It is written in the following manner:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    toc:
  - title: Group 1
    subfolderitems:
      - page: Thing 1
        url: v0.6/thing1.html
      - page: Thing 2
        url: v0.6/thing2.html
      - page: Thing 3
        url: v0.6/thing3.html
</code></pre></div></div>

<p>The output of the code snippet would be:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    Group 1
      Thing 1
      Thing 2
      Thing 3
</code></pre></div></div>

<h3 id="alerts">Alerts</h3>

<div class="alert alert-info">
<h4 class="alert-heading">What is an alert?</h4>
An alert is a box that can stand out to indicate important information. You can choose from levels success, warning, danger, info, and primary. This example is an info box, and the code for another might look like this:
</div>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{% include alert.html type="info" title="Here is another!" %}
</code></pre></div></div>

<p>Just for fun, here are all the types:</p>

<div class="alert alert-warning">
<h4 class="alert-heading">warning</h4>
This is a warning
</div>

<div class="alert alert-danger">
<h4 class="alert-heading">danger</h4>
This alerts danger!
</div>

<div class="alert alert-success">
<h4 class="alert-heading">success</h4>
This alerts success
</div>

<div class="alert alert-info">
<h4 class="alert-heading">info</h4>
This is useful information.
</div>

<div class="alert alert-primary">
<h4 class="alert-heading">primary</h4>
This is a primary alert
</div>

<div class="alert alert-secondary">
<h4 class="alert-heading">secondary</h4>
This is a secondary alert
</div>

<h3 id="alerts-1">Alerts</h3>

<div class="alert alert-info">
<h4 class="alert-heading">What is an alert?</h4>
An alert is a box that can stand out to indicate important information. You can choose from levels success, warning, danger, info, and primary. This example is an info box, and the code for another might look like this:
</div>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{% include alert.html type="info" title="Here is another!" %}
</code></pre></div></div>

<p>Just for fun, here are all the types:</p>

<div class="alert alert-warning">
<h4 class="alert-heading">warning</h4>
This is a warning
</div>

<div class="alert alert-danger">
<h4 class="alert-heading">danger</h4>
This alerts danger!
</div>

<div class="alert alert-success">
<h4 class="alert-heading">success</h4>
This alerts success
</div>

<div class="alert alert-info">
<h4 class="alert-heading">info</h4>
This is useful information.
</div>

<div class="alert alert-primary">
<h4 class="alert-heading">primary</h4>
This is a primary alert
</div>

<div class="alert alert-secondary">
<h4 class="alert-heading">secondary</h4>
This is a secondary alert
</div>

<h3 id="quotes">Quotes</h3>

<p>You can include block quotes to emphasize text.</p>

<blockquote>
  <p>Here is an example. Isn’t this much more prominent to the user?</p>
</blockquote>

<h2 id="development">Development</h2>

<h3 id="editable-intra-page-table-of-contents-toolbar">Editable Intra-page Table of Contents Toolbar</h3>

<p>Control the display of this intra-page navigator with either page level or layout level frontmatter variables:</p>

<p><code class="language-plaintext highlighter-rouge">display-toolbar</code></p>

<p>Set to <code class="language-plaintext highlighter-rouge">true</code> (make “editable” toolbar visible) or <code class="language-plaintext highlighter-rouge">false</code> (hide “editable” toolbar)</p>

<h3 id="if-conditional"><code class="language-plaintext highlighter-rouge">if</code> conditional</h3>

<p>This executes the block of code only if the given condition is true. It is executed in the following manner:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">{% if product.title == &#39;Awesome Shoes&#39; %}
  These shoes are awesome!
{% endif %}
</code>
</div>
</pre>

<p>If the condition is true, the output would be:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    These shoes are awesome!
</code></pre></div></div>

<h3 id="for-loop"><code class="language-plaintext highlighter-rouge">for</code> loop</h3>

<p>The for statement executes a block of code repeatedly. It is wriiten in the following manner:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">{% for names in collection.names %}
  {{ name.title }}
{% endfor %}</code>
</div>
</pre>

<p>The output produced by the above code snippet:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    Sam Ham Ethan
</code></pre></div></div>

<h3 id="comment">Comment</h3>

<p>Comments allow to leave a block of code unattended, any statements between opening and closing comment would not be executed.</p>

<h3 id="include">Include</h3>

<p>The above tag is used to insert a already rendered file within the current template. It is written in the following manner:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">{% include file.html %}</code>
</div>
</pre>

<h3 id="assign">Assign</h3>

<p>The assign tag is used to create a new variable. It is written in the following manner:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">{% assign variable1 = true %}</code>
</div>
</pre>

<h2 id="suggested-reading">Suggested Reading</h2>

<ul>
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
</ul>



<script>
  /*clipboard.js code*/
</script>

<!-- <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>
$(document).ready(function() {

    var toc = $('#TOC');

    // Select each header
    sections = $('.td-content h1');
        $.each(sections, function(idx, v) {
            section = $(v);
            var div_id = $(section).attr('id');
            if(!section.hasClass('noTOC')){
               var div_text = section.text().split('¶')[0];
              var parent = $("#" + div_id)
              var content = '<li id="link_' + div_id + '" class="md-nav__item"><a class="md-nav__link" href="/v0.6/v0.6#' + div_id + '" title="' + div_text +'">' + div_text +'</a></li>';
              $(toc).append(content);
            }

            // Add section code to subnavigation
            var children = $('<nav class="md-nav"><ul class="md-nav__list"></nav></ul>')
            var contenders = $("#" + div_id).nextUntil("h1");
            $.each(contenders, function(idx, contender){
               if( !$(contender).hasClass("noTOC") && ($(contender).is('h2') || $(contender).is('h3')) ) {
                   var contender_id = $(contender).attr('id');
                   var contender_text = $(contender).text().split('¶')[0];
                   var content = '<li class="md-nav__item"><a class="md-nav__link" href="/v0.6/v0.6#' + contender_id + '" title="' + contender_text +'">' + contender_text +'</a></li>';
                   children.append(content);
                }
             })
             $("#link_" + div_id).append(children);
        });
        //added 'selected' tag to the first element of toc
        $('.md-nav__link').first().addClass('selected');

        $(window).scroll(function(e){
          // Detect how far are we from the top of the page
          let windowTop = $(this).scrollTop();
          // Loop through every navigation menu item
          $('.md-nav__link').each(function (event) {       
              if (windowTop >= $($(this).attr('href')).offset().top - 100) {
              // Remove 'selected' from previously highlighted menu items
              $('.selected').removeClass('selected');
              // Highlight the current menu item by adding 'selected' class
              $(this).addClass('selected');
          }
          if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            $('.selected').removeClass('selected');
              $(this).addClass('selected');
          }
        });
      })
      // Smooth scroll to target section when clicking on TOC link
      $('a[href^="#"]').on('click', function(event) {
        event.preventDefault();
        var target = $(this.hash);
        if (target.length) {
          $('html, body').animate({
          scrollTop: target.offset().top - 70
          }, 1000);
        }
      });
    });
</script> -->  <br/>


        </div>
      </main>
      
      <div class="content-table-wrapper">
        <div class="content-table">
          <div class="content-table__editable"><strong>Tools</strong>
<a href="/v0.6/v0.6https://github.com/meshery/meshery/issues/new?assignees=&labels=area%2Fdocs%2C+framework%2Fjekyll&template=documentation.md&title=%5BDocs%5D" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i> Create doc issue</a>
<a href="/v0.6/v0.6https://github.com/meshery/meshery/blob/master/docs/pages/project/contributing/contributing-docs.md" rel="noopener" target="_blank"><i class="fa fa-edit fa-fw"></i> Edit this page</a>
<a href="/v0.6/v0.6https://github.com/meshery/meshery/new/master/docs/pages/project/contributing/contributing-docs.md?filename=change-me.md&value=---%0Atitle%3A+%22Long+Page+Title%22%0AlinkTitle%3A+%22Short+Nav+Title%22%0Aweight%3A+100%0Adescription%3A+%3E-%0A+++++Page+description+for+heading+and+indexes.%0A---%0A%0A%23%23+Heading%0A%0AEdit+this+template+to+create+your+new+page.%0A%0A%2A+Give+it+a+good+name%2C+ending+in+%60.md%60+-+e.g.+%60getting-started.md%60%0A%2A+Edit+the+%22front+matter%22+section+at+the+top+of+the+page+%28weight+controls+how+its+ordered+amongst+other+pages+in+the+same+directory%3B+lowest+number+first%29.%0A%2A+Add+a+good+commit+message+at+the+bottom+of+the+page+%28%3C80+characters%3B+use+the+extended+description+field+for+more+detail%29.%0A%2A+Create+a+new+branch+so+you+can+preview+your+new+file+and+request+a+review+via+Pull+Request.%0A" rel="noopener" target="_blank"><i class="fa fa-plus fa-fw"></i> Create new page</a>


<!-- this will parse through the header fields and add a button to open
     an issue / ask a question on Github. The editable field should be in
     the post frontend matter, and refer to the label to open the issue for -->
     
</div>
          <nav id="TableOfContents">
            <strong>Contents</strong>
            <ul>
              <li>
                <ul id="TOC">
                  <!-- Links will be appended here-->
                </ul>
              </li>
            </ul>
          </nav>
        </div>
      </div>
      
    </div>
    <footer class="footer">
  <!-- meshery-custom-begin"
      <div class="col-6 col-sm-4 text-xs-center order-sm-2">

<ul class="list-inline mb-0">
  <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="Twitter" data-original-title="Twitter">
    <a class="text-white" target="_blank" href="/v0.6/v0.6https://twitter.com/https://twitter.com/mesheryio">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
</ul>
</div>
<div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
<ul class="list-inline mb-0">
  <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="GitHub" data-original-title="GitHub">
    <a class="text-white" target="_blank" href="/v0.6/v0.6https://github.com/meshery/meshery">
      <i class="fab fa-github"></i>
    </a>
  </li>
</ul>
meshery-custom-end -->
  <div class="text-white">&copy; 2023 The Meshery Authors</div>
  

  <!-- meshery-custom-begin -->

  <div class="footer-icons-list">
    <div class="footer-icons">
      <a class="social__link social__link--forum" href="/v0.6/v0.6http://discuss.meshery.io" target="_blank" rel="noreferrer">
        <img
          src=""
          alt="forum"
        />
        <span class="footer-icons-text small-hide">Community discussion forum</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link social__link--mail" href="/v0.6/v0.6https://meshery.io/subscribe" target="_blank" rel="noreferrer">
        <img
          src=""
          alt="mail"
        />
        <span class="footer-icons-text small-hide">Get connected with the Meshery community</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link social__link--slack" href="/v0.6/v0.6 https://slack.meshery.io/" target="_blank" rel="noreferrer">
        <img
          class="slack"
          src=""
          alt="slack"
        />
        <span class="footer-icons-text small-hide">Join the Meeshery Slack</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="/v0.6/v0.6https://meshery.io/calendar">
        <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
          <path
            d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"
          />
          <g stroke-linecap="undefined" stroke-linejoin="undefined">
            <path d="M-3.468 8.168h-.033m25.313-4.242l-.063-.254M7.858 4.814v9.387" />
            <path d="M1.833 9.507h12.051" />
          </g>
        </svg>
        <span class="footer-icons-text small-hide">Subscribe to the community calender</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="/v0.6/v0.6https://twitter.com/mesheryio" target="_blank" rel="noreferrer">
       <svg fill="#999" alt="twitter" class="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1" height="1.8em"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="#0d0d0d"></path></svg>
       <span class="footer-icons-text small-hide">Follow on Twitter</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="/v0.6/v0.6https://github.com/meshery" target="_blank" rel="noreferrer">
        <img
          class="github"
          src=""
          alt="github"
        />
        <span class="footer-icons-text small-hide">Contribute on GitHub</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="/v0.6/v0.6https://www.linkedin.com/company/layer5" target="_blank" rel="noreferrer">
        <img
          class="linkedin"
          src=""
          alt="linkedin"
        />
        <span class="footer-icons-text small-hide">Connect on LinkedIn</span>
      </a>
    </div>

    <div class="footer-icons">
      <a
        class="social__link"
        href="/v0.6/v0.6https://www.youtube.com/mesheryio?sub_confirmation=1"
        target="_blank"
        rel="noreferrer"
      >
        <img
          class="youtube"
          src=""
          alt="youtube"
        />
        <span class="footer-icons-text small-hide">Watch community meeting recordings</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="/v0.6/v0.6https://hub.docker.com/u/meshery/" target="_blank" rel="noreferrer">
        <img
          class="docker"
          src=""
          alt="docker"
        />
        <span class="footer-icons-text small-hide">Access Docker images</span>
      </a>
    </div>
  </div>
  <!-- meshery-custom-end -->
</footer>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>

<script type="text/javascript" src="/assets/js/lightbox.js"></script>
<link rel="stylesheet" href="/v0.6/assets/css/lightbox.css" />
<script type="module" src="https://md-block.verou.me/md-block.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/navbar.js"></script>

 <script async src='https://www.google-analytics.com/analytics.js'></script>
<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	ga('create', 'UA-00000000-0', 'auto');
	ga('send', 'pageview');
}
</script>

  </body>
</html>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>
$(document).ready(function() {

    var toc = $('#TOC');

    // Select each header
    sections = $('.td-content h1');
        $.each(sections, function(idx, v) {
            section = $(v);
            var div_id = $(section).attr('id');
            if(!section.hasClass('noTOC')){
               var div_text = section.text().split('¶')[0];
              var parent = $("#" + div_id)
              var content = '<li id="link_' + div_id + '" class="md-nav__item"><a class="md-nav__link" href="/v0.6/v0.6#' + div_id + '" title="' + div_text +'">' + div_text +'</a></li>';
              $(toc).append(content);
            }

            // Add section code to subnavigation
            var children = $('<nav class="md-nav"><ul class="md-nav__list"></nav></ul>')
            var contenders = $("#" + div_id).nextUntil("h1");
            $.each(contenders, function(idx, contender){
               if( !$(contender).hasClass("noTOC") && ($(contender).is('h2') || $(contender).is('h3')) ) {
                   var contender_id = $(contender).attr('id');
                   var contender_text = $(contender).text().split('¶')[0];
                   var content = '<li class="md-nav__item"><a class="md-nav__link" href="/v0.6/v0.6#' + contender_id + '" title="' + contender_text +'">' + contender_text +'</a></li>';
                   children.append(content);
                }
             })
             $("#link_" + div_id).append(children);
        });
        //added 'selected' tag to the first element of toc
        $('.md-nav__link').first().addClass('selected');

        $(window).scroll(function(e){
          // Detect how far are we from the top of the page
          let windowTop = $(this).scrollTop();
          // Loop through every navigation menu item
          $('.md-nav__link').each(function (event) {       
              if (windowTop >= $($(this).attr('href')).offset().top - 100) {
              // Remove 'selected' from previously highlighted menu items
              $('.selected').removeClass('selected');
              // Highlight the current menu item by adding 'selected' class
              $(this).addClass('selected');
          }
          if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            $('.selected').removeClass('selected');
              $(this).addClass('selected');
          }
        });
      })
      // Smooth scroll to target section when clicking on TOC link
      $('a[href^="#"]').on('click', function(event) {
        event.preventDefault();
        var target = $(this.hash);
        if (target.length) {
          $('html, body').animate({
          scrollTop: target.offset().top - 70
          }, 1000);
        }
      });
    });
</script>

